<template>
	<view class="bg-w pb30">
		<view class="shop-banner">
			
			<swiper v-if="isShowBanner == true" class="shop-swiper" :autoplay="true" :indicator-dots="false" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in photos" :key="index">
					<image @click="showPic" mode="aspectFill" :src="item"></image>
				</swiper-item>
			</swiper>
			<view v-else class="shop-banner-none text-center pt120 opacity8">
				<view style="font-size: 160rpx;" class="iconfont iconimg_shop_default"></view>
				<view class="ft16 mt20">商家暂未设置背景图</view>
			</view>
		</view>
		<view class="shop-main">
			<view class=" plr30">
				<view class="bdr16 box-shadow bg-w over-hidden">
					<view class="pd30">
						<view class="flex space">
							<view class="wh80">
								<image class="wh80 bdr8 box-shadow" :src="''"></image>
							</view>
							<view class="ws80 pl30">
								<view class="ft16 ftw600 text-main">CNT旅行社(总店)</view>
								<view class="flex space mt20">
									<view>
										<view class="flex alcenter">
											<unio2o-star-mini></unio2o-star-mini>
											<view class="ml20 ft14 text-theme ftw600">4.0分</view>
										</view>
										<view class="flex alcenter mt20">
											<view class="store-cat">美食</view>
											<view class="store-tuan ml10">抢</view>
											<view class="store-coupon ml10">券</view>
											<view class="store-buy ml10">买</view>
										</view>
									</view>
									<view class="text-center">
<!-- 										<view class="iconfont iconbtn_collect text-info ft22"></view>
 -->									
										<view class="iconfont iconbtn_collected text-theme ft22"></view>
										<view class="ft14 text-info">收藏</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="mt30 text-info ft16">
							<text class="iconfont icon_time"></text>
							<text class="ml20 text-main">
								营业： 09:00-12:00，14:00-20:00
							</text>
						</view>
						<view class="mt30 text-info ft16">
							<text class="iconfont icon_location1"></text>
							<text class="ml20 text-main">
								地址：合肥万达临湖苑E区
							</text>
						</view>
					</view>
					<view class="line"></view>
					<view class="flex space">
						<view @click="storeAddrAlert = true" class="col2 shop-action flex alcenter text-main center">
							<text class="ft16 ftw600">切换门店</text>
							<text class="iconfont iconbtn_qiehuan ml10"></text>
						</view>
						<view class="col2 shop-action flex alcenter center text-main bdlt">
							<navigator url="/pages/shop/info">
								<text class="ft16 ftw600">更多信息</text>
								<text class="iconfont iconbtn_arrowr ml10"></text>
							</navigator>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mt30 plr60">
				<navigator  url="/pages/shop/buy" style="width:100%">
				<button class="btn-main ftw600 ft18 text-w">优惠买单</button>
				</navigator>
			</view>
			<view class="mt20 plr30">
				<view class="store-tab flex">
					<view :data-index="0" @click="selectTab" :class="selectIndex == 0 ? 'on' : ''" class="item flex center alcenter">
						店铺抢购
					</view>
					<view :data-index="1" @click="selectTab" :class="selectIndex == 1 ? 'on' : ''" class="item flex center alcenter">
						领优惠券
					</view>
					<view :data-index="2" @click="selectTab" :class="selectIndex == 2 ? 'on' : ''" class="item flex center alcenter">
						店铺评价
					</view>
				</view>
				<view class="line"></view>
				<view class="mt30">
					<view v-show="selectIndex == 0">
						<view class="mb40">
							<unio2o-tuan-list :showStore="false"></unio2o-tuan-list>
						</view>
						<view class="mb40">
							<unio2o-tuan-list :showStore="false"></unio2o-tuan-list>
						</view>
						<view class="mb40">
							<unio2o-tuan-list :showStore="false"></unio2o-tuan-list>
						</view>
					</view>
					<view v-show="selectIndex == 1">
						<view class="mb40">
							<unio2o-coupon-item :showStore="false"></unio2o-coupon-item>
						</view>	
						<view class="mb40">
							<unio2o-coupon-item :showStore="false"></unio2o-coupon-item>
						</view>	
						<view class="mb40">
							<unio2o-coupon-item :showStore="false"></unio2o-coupon-item>
						</view>	
					</view>
					<view v-show="selectIndex == 2">
						
						<view class="flex wrap">
							<view class="shop-comment-tag on flex center alcenter mr20 mb20">全部 32</view>
							<view class="shop-comment-tag flex center alcenter mr20 mb20">晒图 12</view>
							<view class="shop-comment-tag flex center alcenter mr20 mb20">满意 12</view>
							<view class="shop-comment-tag flex center alcenter mr20 mb20">店家热情 6</view>
							<view class="shop-comment-tag flex center alcenter mr20 mb20">环境舒适 6</view>
							<view class="shop-comment-tag flex center alcenter mr20 mb20">服务态度好 6</view>
						</view>
						
						<view class="mt10">
							
							<view class="mb30">
								<unio2o-comment-item></unio2o-comment-item>
								
								<view class="line mt30"></view>
							</view>
							
							
						</view>
						
					</view>
				</view>
			</view>
		</view>
	
		
		<unio2o-modal @closed="storeAddrAlert = false" title="切换门店" :show="storeAddrAlert">
			<view class="pd30" style="max-height: 1000rpx; overflow-y: scroll;">
				<view class="ft16 text-info">当前门店</view>
				
				<view class="box-shadow bdr16 pd30 mt30 flex alcenter space">
					<view class="pt10 pb10">
						<view class="ft16 text-main ftw600">CNT旅行社(总店)</view>
						<view class="mt20 ft14 text-info">合肥万达临湖苑E区</view>
					</view>
					<view class="ft14">
						<text class="text-notice">距我</text>
						<text class="text-theme ftw600">1.2km</text>
					</view>
				</view>
				
				<view class="mt30 ft16 text-info">其他门店</view>
				
				<view class="box-shadow bdr16 pd30 mt30 flex alcenter space">
					<view class="pt10 pb10">
						<view class="ft16 text-main ftw600">CNT旅行社(总店)</view>
						<view class="mt20 ft14 text-info">合肥万达临湖苑E区</view>
					</view>
					<view class="ft14">
						<text class="text-notice">距我</text>
						<text class="text-theme ftw600">1.2km</text>
					</view>
				</view>
				<view class="box-shadow bdr16 pd30 mt30 flex alcenter space">
					<view class="pt10 pb10">
						<view class="ft16 text-main ftw600">CNT旅行社(总店)</view>
						<view class="mt20 ft14 text-info">合肥万达临湖苑E区</view>
					</view>
					<view class="ft14">
						<text class="text-notice">距我</text>
						<text class="text-theme ftw600">1.2km</text>
					</view>
				</view>
				<view class="box-shadow bdr16 pd30 mt30 flex alcenter space">
					<view class="pt10 pb10">
						<view class="ft16 text-main ftw600">CNT旅行社(总店)</view>
						<view class="mt20 ft14 text-info">合肥万达临湖苑E区</view>
					</view>
					<view class="ft14">
						<text class="text-notice">距我</text>
						<text class="text-theme ftw600">1.2km</text>
					</view>
				</view>
				<view class="box-shadow bdr16 pd30 mt30 flex alcenter space">
					<view class="pt10 pb10">
						<view class="ft16 text-main ftw600">CNT旅行社(总店)</view>
						<view class="mt20 ft14 text-info">合肥万达临湖苑E区</view>
					</view>
					<view class="ft14">
						<text class="text-notice">距我</text>
						<text class="text-theme ftw600">1.2km</text>
					</view>
				</view>
				
			</view>
		</unio2o-modal>
		
		<view class="shop-footer-h"></view>
		<view class="shop-footer bg-w box-shadow-top">
			<view class="shop-footer-main flex alcenter">
					<view class="col3 text-center">
						<view class="iconfont iconbtn_bottom_location ft22"></view>
						<view class="ft14 text-info">导航</view>
					</view>
					<view class="col3 text-center">
						<view class="iconfont iconbtn_bottom_call ft22"></view>
						<view class="ft14 text-info">客服</view>
					</view>
					<view class="col3 text-center">
						<view class="iconfont iconbtn_bottom_share ft22"></view>
						<view class="ft14 text-info">分享</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	import unio2oStarMini from '@/components/base/star/mini.vue';
	import unio2oTuanList from '@/components/module/tuan/list.vue';
	import unio2oCouponItem from '@/components/module/coupon/item.vue';
	import unio2oCommentItem from '@/components/module/store/comment/item.vue';
	import unio2oModal from '@/components/base/modal/modal.vue';
	export default{
		components:{
			unio2oStarMini,
			unio2oTuanList,
			unio2oCouponItem,
			unio2oCommentItem,
			unio2oModal
		},
		data(){
			return {
				storeAddrAlert:false,
				selectIndex:0,
				isShowBanner:false,
				photos:[
					this.$config.staticUrl + 'photo/01.jpg',
					this.$config.staticUrl + 'photo/02.jpg',
					this.$config.staticUrl + 'photo/03.jpg',
				]
			}
		},
		methods:{
			showPic(){
				uni.previewImage({
					urls: this.photos
				});
			},
			selectTab(e){
				var  index = parseInt(e.currentTarget.dataset.index);
				this.selectIndex = index;
			}
		}
	}
</script>

<style>
	.shop-comment-tag{
		height: 64rpx;
		padding: 0 30rpx;
		border-radius: 32rpx;
		background: #F7F7F7;
		font-size: 28rpx;
		color:#666666;
	}
	.shop-comment-tag.on{
		border:2rpx solid #FF6D00;
		background: #FFFFFF;
		color:#FF6D00;
	}
	
	.shop-footer-h{
		height: calc(120rpx + env(safe-area-inset-bottom));
	}
	.shop-footer{
		width: 100%;
		position: fixed;
		z-index: 30;
		height: calc(120rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
		bottom: 0;
	}
	.shop-footer-main{
		height: 120rpx;
	}
	.store-tab{
		height: 120rpx;
	}
	.store-tab .item{
		height: 120rpx;
		margin-right: 60rpx;
		border-bottom: 8rpx solid #FFFFFF;
		font-size: 32rpx;
		color:#333333;
	}
	.store-tab .item.on{
		border-color:  #FF6D00;
		font-size: 36rpx;
		font-weight: 600;
	}
	.shop-action{
		height:100rpx;
	}
	.shop-banner{
		height: 500rpx;
		width: 100%;
		position: relative;
		z-index: 1;
		background: #CCCCCC;
		color:#FFFFFF;
	}
	.shop-banner-none{
		height: 500rpx;
		width: 100%;
		color:#FFFFFF;
	}
	.shop-swiper{
		height: 500rpx;
		width: 100%;
	}
	.shop-swiper image{
		width: 100%;
		height: 500rpx;
	}
	.shop-main{
		width: 100%;
		position: relative;
		z-index: 20;
		margin-top: -100rpx;
	}
	
	.store-cat,.store-tuan,.store-coupon,.store-buy{
		padding: 4rpx 8rpx;
		border:2rpx solid #CCCCCC;
		color:#999999;
		font-size: 24rpx;
		border-radius: 4rpx;
	}
	.store-tuan{
		color:#FF9B20;
		border-color:#FF9B20;
	}
	.store-coupon{
		color:#FF6D00;
		border-color: #FF6D00;
	}
	.store-buy{
		color:#8BCB44;
		border-color:#8BCB44;
	}
</style>